import React, { useState } from 'react';
import { GridContent } from '@ant-design/pro-components';
import './PersionInfo.less';
import { Menu } from 'antd';
import { KfFloatingContextProps } from 'kf-web-library';
import AuthList from './AuthList';
import QuickUserForm from './QuickForm';
import * as API from "@/services";

export interface PersionInfoProps extends KfFloatingContextProps {
    userId?: API.EntityId;
}

const PersionInfo: React.FC<PersionInfoProps> = (props) => {
    const [selectKey, setSelectKey] = useState('base');

    const renderChildren = () => {
        switch (selectKey) {
            case 'base':
                return <QuickUserForm formType={'modify'} closeWrapFloating={props.closeWrapFloating} />;
            case 'account':
                return <AuthList bizId={props.userId} />;
            default:
                break;
        }
        return null;
    };

    return (
        <GridContent>
            <div className={'persion-info-main'}>
                <div className={'persion-info-left-menu'}>
                    <Menu mode={'vertical'} selectedKeys={[selectKey]} onClick={({ key }) => setSelectKey(key as string)}>
                        <Menu.Item key={'base'}>基本信息</Menu.Item>
                        <Menu.Item key={'account'}>关联账号</Menu.Item>
                    </Menu>
                </div>
                <div className={'persion-info-content'}>{renderChildren()}</div>
            </div>
        </GridContent>
    );
};

export default PersionInfo;
